import React from 'react';
import moment from 'moment';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Timeline, Input, Modal, Row, Col } from 'antd';

const FormItem = Form.Item;
const { TextArea } = Input;
class ServiceRemark extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      expandForm: false,
    };
  }

  // 提交数据
  submitData = () => {
    const { form, submitData } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        submitData(values);
      }
    });
  };

  toggleForm = () => {
    const { expandForm } = this.state;
    this.setState({
      expandForm: !expandForm,
    });
  };

  renderAdvancedForm() {
    const { detailHdl } = this.props;
    return (
      <Row>
        <Col>
          <a onClick={this.toggleForm}>
            <span style={{ marginRight: 8 }}>历史记录</span>收起
            <UpOutlined />
          </a>
        </Col>
        <Col
          style={{
            marginLeft: 95,
            marginTop: 14,
            height: 200,
            minHeight: 200,
            overflow: 'hidden',
            overflowY: 'scroll',
          }}
        >
          <Timeline>
            {detailHdl.map(item => (
              <Timeline.Item key={item.operTime}>
                <p style={{ lineHeight: '25px' }}>
                  <span style={{ marginRight: 8 }}>
                    {' '}
                    {moment(item.operTime).format('YYYY-MM-DD HH:mm')}
                  </span>
                  <span>{item.operName}</span>
                </p>
                <p>{item.content}</p>
              </Timeline.Item>
            ))}
          </Timeline>
        </Col>
      </Row>
    );
  }

  renderSimpleForm() {
    return (
      <Row>
        <Col>
          <a onClick={this.toggleForm}>
            <span style={{ marginRight: 8 }}>历史记录</span>展开
            <DownOutlined />
          </a>
        </Col>
      </Row>
    );
  }

  renderForm() {
    const { expandForm } = this.state;
    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

  render() {
    const {
      form: { getFieldDecorator },
      visHdlRemark,
      handleModalVisible,
    } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 9,
        },
        sm: {
          span: 8,
        },
        md: {
          span: 6,
        },
        lg: {
          span: 7,
        },
        xl: {
          span: 6,
        },
        xxl: {
          span: 4,
        }, // xs: 8, sm: 16, md: 24, lg: 32
      },
      wrapperCol: {
        xs: {
          span: 17,
        },
        sm: {
          span: 17,
        },
        md: {
          span: 17,
        },
        lg: {
          span: 16,
        },
        xl: {
          span: 17,
        },
        xxl: {
          span: 17,
        },
      },
    };
    return (
      <Modal
        title="办理备注"
        visible={visHdlRemark}
        okText="确定"
        cancelText="取消"
        onOk={this.submitData}
        onCancel={() => handleModalVisible(false)}
        destroyOnClose
      >
        <Row>
          <FormItem {...formItemLayout} label={<span>办理备注</span>}>
            {getFieldDecorator('content', {
              rules: [
                {
                  required: false,
                  message: '请输入办理备注',
                },
              ],
            })(
              <TextArea
                placeholder="请输入不得超过200字的备注"
                style={{ height: 100 }}
                maxLength="200"
              />
            )}
          </FormItem>
        </Row>
        <Row>{this.renderForm()}</Row>
      </Modal>
    );
  }
}
export default Form.create()(ServiceRemark);
